<template>
  <div class="home-container">
    <div class="welcome-section">
      <div class="welcome-header">
        <img
          src="@/assets/images/logo.png"
          alt="logo"
          class="logo"
        />
        <div class="welcome-info">
          <h2>欢迎使用 {{ SYSTEM_CONFIG.name }}</h2>
          <p>{{ currentTime }}</p>
        </div>
      </div>

      <el-row :gutter="20">
        <el-col
          v-for="card in welcomeCards"
          :key="card.title"
          :span="6"
        >
          <el-card shadow="hover">
            <div class="welcome-card">
              <el-icon
                :size="48"
                :class="card.iconClass"
              >
                <component :is="card.icon" />
              </el-icon>
              <div class="card-content">
                <div class="card-value">{{ card.value }}</div>
                <div class="card-title">{{ card.title }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="info-section">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card class="system-info">
            <template #header>
              <div class="card-header">
                <span>系统信息</span>
              </div>
            </template>
            <el-descriptions :column="2">
              <el-descriptions-item label="系统名称">
                {{ SYSTEM_CONFIG.name }}
              </el-descriptions-item>
              <el-descriptions-item label="系统标识">
                {{ SYSTEM_CONFIG.code }}
              </el-descriptions-item>
              <el-descriptions-item label="系统版本">
                {{ SYSTEM_CONFIG.version }}
              </el-descriptions-item>
              <el-descriptions-item label="系统版权">
                {{ SYSTEM_CONFIG.copyright }}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card class="user-info">
            <template #header>
              <div class="card-header">
                <span>个人信息</span>
              </div>
            </template>
            <div class="user-profile">
              <el-avatar
                :size="64"
                :src="userInfo.avatar || './logo.png'"
              />
              <h3>{{ userInfo.personName || userInfo.accountName }}</h3>
              <p>最近登录时间：{{ lastLoginTime }}</p>
            </div>
            <div class="user-tags">
              <el-tag class="user-tag">
                {{ userInfo.orgIdConvert }}
              </el-tag>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { SYSTEM_CONFIG } from '@/base/interface-config';
  import { formatDateTime } from '@/utils/date';
  import { Connection, DataLine, Monitor, User } from '@element-plus/icons-vue';
  import { computed, ref } from 'vue';

  const userInfo = ref<any>(JSON.parse(localStorage.getItem('userInfo') || '{}'));

  // 当前时间
  const currentTime = ref(formatDateTime(new Date()));
  setInterval(() => {
    currentTime.value = formatDateTime(new Date());
  }, 1000);

  // 欢迎卡片数据
  const welcomeCards = [
    {
      icon: Monitor,
      iconClass: 'icon-monitor',
      title: '在线用户',
      value: Math.floor(Math.random() * 1000 * 10)
    },
    {
      icon: Connection,
      iconClass: 'icon-connection',
      title: '系统消息',
      value: Math.floor(Math.random() * 2000)
    },
    {
      icon: DataLine,
      iconClass: 'icon-data',
      title: '待办事项',
      value: Math.floor(Math.random() * 100)
    },
    {
      icon: User,
      iconClass: 'icon-user',
      title: '新增用户',
      value: Math.floor(Math.random() * 100)
    }
  ];

  // 上次登录时间
  const lastLoginTime = computed(() => {
    return formatDateTime(userInfo.value.loginTime);
  });
</script>

<style lang="scss" scoped>
  .home-container {
    padding: 20px;

    .welcome-section {
      margin-bottom: 20px;

      .welcome-header {
        display: flex;
        align-items: center;
        margin-bottom: 24px;

        .logo {
          width: 64px;
          height: 64px;
          margin-right: 16px;
        }

        .welcome-info {
          h2 {
            margin: 0;
            font-size: 24px;
            color: var(--el-text-color-primary);
          }

          p {
            margin: 8px 0 0;
            font-size: 14px;
            color: var(--el-text-color-secondary);
          }
        }
      }

      .welcome-card {
        display: flex;
        align-items: center;
        padding: 20px;

        .el-icon {
          margin-right: 16px;

          &.icon-monitor {
            color: #409eff;
          }

          &.icon-connection {
            color: #67c23a;
          }

          &.icon-data {
            color: #e6a23c;
          }

          &.icon-user {
            color: #f56c6c;
          }
        }

        .card-content {
          .card-value {
            font-size: 24px;
            font-weight: bold;
            color: var(--el-text-color-primary);
          }

          .card-title {
            margin-top: 8px;
            font-size: 14px;
            color: var(--el-text-color-secondary);
          }
        }
      }
    }

    .info-section {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .user-info {
        .user-profile {
          text-align: center;
          margin-bottom: 16px;

          h3 {
            margin: 16px 0 8px;
            font-size: 18px;
            color: var(--el-text-color-primary);
          }

          p {
            margin: 0;
            font-size: 14px;
            color: var(--el-text-color-secondary);
          }
        }

        .el-avatar {
          background: transparent;
        }
        .user-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          justify-content: center;
        }
      }
    }
  }

  :deep(.el-card) {
    height: 100%;
  }
</style>
